<route lang="jsonc" type="page">{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "登陆页面",
    "navigationStyle": "custom",
  },
}</route>

<script lang="ts" setup>
import { loginApi } from '@/api';

/* 手机号 */
const phone = ref('')

const value = ref<string>("");
function handleChange(event) {
  console.log(event);
}

const columns = ref(["+86", "+87"]);
const areaValue = ref("+86");

function handleConfirm({ value }) {
  areaValue.value = value;
}

// 跳到注册页
const goToRegister = () => {
  uni.navigateTo({
    url: "/pages/login/register",
  });
};

// 跳到忘记密码页面
const goToForget = () => {
  uni.navigateTo({
    url: "/pages/login/forgotPassword",
  });
};

/* 登陆 */
const loginFn = async() => {
   try{
  const _res = await loginApi({phone: phone.value, password: value.value});

  /* 把token存起来，并跳到首页 */
  uni.setStorageSync('token', _res.token);  

   
    /* 回到登陆页 */
    uni.switchTab({ url: '/pages/index/index' });

  console.log('_res=>',_res);
  
   }catch(e){
    //TODO handle the exception
   }
}

</script>

<template>
  <view style="padding-top: 248rpx;">
    <div class="logo">LOGO</div>

    <div class="login_content">
      <div class="input_content">
        <wd-input type='number' v-model="phone" placeholder="请输入手机号" @change="handleChange" no-border
          custom-class="input_root">
          <template #prefix>
            <wd-picker :columns="columns" v-model="areaValue" @confirm="handleConfirm" />
          </template>
        </wd-input>
      </div>

      <div class="input_content mt-16rpx">
        <wd-input v-model="value" show-password @change="handleChange" no-border custom-class="input_root" />
      </div>

      <div style="
          width: 100%;
          display: flex;
          justify-content: flex-end;
          margin-top: 32rpx;
        ">
        <span style="color: #ff0800; font-size: 28rpx" @click="goToForget">忘记密码?</span>
      </div>

      <div class="mt-80rpx">
        <wd-button block size="large" @click="loginFn">登录</wd-button>
      </div>

      <div class="mt-32rpx" style="font-size: 28rpx">
        <span style="color: #999999">还没有账号？</span><span style="color: #ff0800" @click="goToRegister">注册</span>
      </div>

      <div style="
          position: fixed;
          bottom: 92rpx;
          font-size: 28rpx;
          display: flex;
          justify-content: center;
        ">
        <wd-checkbox checked-color="#FF0800" :modelValue="true" shape='circle' />
        <span style="color: #999999"> 已阅读并同意</span>
        <span style="color: #ff0800">《用户协议》《隐私政策》</span>
      </div>
    </div>
  </view>
</template>


<style>
page {
  background-color: white;
  height: 100%;
}
</style>


<style lang="scss" scoped>
.logo {
  // margin-top: 248rpx;
  display: flex;
  justify-content: center;

  font-family: Inter, Inter;
  font-weight: 600;
  font-size: 96rpx;
  color: #000000;
  text-align: left;
  text-transform: none;
}

.login_content {
  margin-top: 100rpx;

  padding-left: 50rpx;
  padding-right: 50rpx;
}

.input_content {
  width: 650rpx;
  height: 102rpx;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  border: 2rpx solid #d9d9d9;

  display: flex;
  align-items: center;
}

.input_root {
  width: 96%;
  margin-left: 32rpx;
  margin-right: 32rpx;
}
</style>
